<template>
  <div class="wrap">
    <Header :title="'在线问答'" />
    <div class="answers-content">
      <div class="answers-detail">
        <div class="answers-top">
          <div class="pic">
            <img src="../../images/img_04.png" alt="">
          </div>
          <div class="quiz-box">
            <p><span>小爱</span><span>2018-04-01</span></p>
            <p>提问的问题？</p>
          </div>
        </div>
        <!-- 回答区域 -->
        <div class="response-box">
          <div class="res-top">
            <p>
              <span class="user">李玲</span><span class="position">月嫂</span><span class="time">2018-03-05</span>
            </p>
            <p>回答的内容</p>
          </div>
        </div>

      </div>

      <input type="file" @change="uploadChange">

    </div>
    <div class="btn-box">
      <mt-button type="primary">我要问答</mt-button>
      <mt-button type="danger">我要回答</mt-button>
    </div>
  </div>
</template>
<script>
  import Header from "../comments/header.vue";
  export default {
    data() {
      return {};
    },
    methods: {
      uploadChange(e) {
        console.log(e);
      }
    },
    components: {
      Header: Header
    }
  };
</script>
<style scoped>
  .wrap {
    height: 100%;
  }

  .answers-detail {
    margin-top: 10px;
    background-color: #fff;
  }

  .answers-top {
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 10px;
  }

  .answers-top .pic img {
    width: 60px;
    height: 60px;
  }

  .quiz-box {
    width: 100%;
    margin-left: 10px;
  }

  .quiz-box p:first-child {
    display: flex;
    justify-content: space-between;
  }

  .response-box {
    padding: 10px;
  }

  .res-top p:first-child {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }

  .res-top p:first-child .user {
    position: relative;
    padding-left: 15px;
  }

  .res-top p:first-child .user::before {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    background: url(../../images/icon_10.png) no-repeat;
    background-size: 10px 10px;
    position: absolute;
    top: 3px;
  }

  .res-top p:first-child .position {
    margin-left: 20px;
  }

  .res-top p:first-child .time {
    float: right;
  }

  .res-top p:last-child {
    padding-top: 10px;
  }

  .btn-box {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 10px;
  }

  .mint-button--normal {
    display: inline-block;
    padding: 0 12px;
    font-size: 12px;
    width: 40%;
    height: 30px;
  }
</style>